<template>
  <div>
    <!-- 医院概况头部背景图 -->
    <div class="headimg">
      <div class="headtitle">
        <p>厚德精业 求实创新</p>
      </div>
    </div>

    <!-- 医院概况 组织机构 -->
    <div class="yygk-zzjg-box">
      <div class="yygk-zzjg-item1">
        <div class="y1item shows">
          <div class="y1">
            <div>医疗占地<span>500</span> 余亩</div>
            <div>业务用房<span>60</span>余万平方米</div>
            <div>编制床位<span>4000</span>张</div>
            <div>在职员工<span>10000</span>余人</div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="yygk-zzjg-item2">
        <div class="y1item shows">
          <div class="y1">
            <div>博士生<span>370</span>名</div>
            <div>硕士生导师<span>520</span>名</div>
            <div>一级学科博士学位授权资格<span>4</span>个</div>
            <div>博士学位点<span>67</span>个</div>
          </div>
        </div>
        <div>
          <div class="y1-link">
            <span>点击查看详细介绍</span>
            <i class="iconfont icon-jixianghangkong_HO"></i>
          </div>
        </div>
      </div>
      <div class="yygk-zzjg-item3">
        <div class="y1item shows">
          <div class="y1">
            <div>博士生<span>370</span>名</div>
            <div>硕士生导师<span>520</span>名</div>
            <div>一级学科博士学位授权资格<span>4</span>个</div>
            <div>博士学位点<span>67</span>个</div>
          </div>
        </div>
        <div class="y1item2 shows">
          <div class="y1">
            <div>Nature Index名列全球第<span>26</span>位</div>
            <div>临床医学ESI排名全球前<span>1‰</span></div>
            <div>国家级研究平台<span>9</span>个</div>
            <div>年均科研项目经费超<span>2</span>亿元</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="zzjg">
      <p class="zzjg-title">组织机构</p>
      <p class="zzjg-desc">了解华西医院完善的组织机构</p>
    </div>
    <!-- 第四部分 -->
    <div class="dt">
      <div class="st">
        <img src="/img/yygk/zjjg.png" alt="" />
      </div>
      <div class="dtls"></div>
    </div>
    <!-- 第六部分 -->
      <div class="ld-titbox">
        <div class="ld-tit">历/现任领导</div>
        <div class="ld-s2box">
          <div class="ldck">
            <i class="iconfont icon-xiajiantou" v-show="ldcur==0"></i>
             <span  @click="curs(0)" :class="{ldcur:ldcur==0}">华西医院</span>
          </div>
           <div class="ldck">
            <i class="iconfont icon-xiajiantou" v-show="ldcur==1"></i>
             <span  @click="curs(1)" :class="{ldcur:ldcur==1}">华西临床医学院</span>
          </div>
        </div>
      </div>
    <!-- 领导历史部分 -->
      <yygk-ld/>

    <!-- 第五部分 -->
    <div class="xrld">
      <div class="xrld-left">
        <p class="xrld-tit">现任领导</p>
        <div><img src="/img/yygk/lyyjj61.png" alt="" /></div>
      </div>
      <div>
        <p class="dw-tit">党委</p>
        <div class="dw-list">
          <div>
            <p>张伟</p>
            <p>程永忠</p>
            <p>罗凤鸣</p>
          </div>
          <div>
            <p>书记</p>
            <p>副书记兼纪委书记</p>
            <p>副书记</p>
          </div>
        </div>
      </div>
      <div>
        <p class="dw-tit">行政</p>
        <div class="listbox">
          <div class="dw-list">
            <div>
              <p>李为民</p>
              <p>程南生</p>
              <p>龚启勇</p>
            </div>
            <div>
              <p>院长</p>
              <p>副院长</p>
              <p>副院长</p>
            </div>
          </div>
          <div class="dw-list">
            <div>
              <p>黄进</p>
              <p>黄勇</p>
              <p>曾勇</p>
            </div>
            <div>
              <p>常务副院长</p>
              <p>副院长</p>
              <p>副院长</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/js/yygk-part1";
import yygkLd from '../components/yygk-ld.vue';
export default {
  components: { yygkLd },
  data() {
    return {
      ldcur:0
    }
  },
  methods: {
    curs(index) {
      this.ldcur = index
    }
  },
};
</script>

<style lang="scss" scoped>
.ld-s2box{
  display: flex;
}
.ldck{
  height: 44px;
  i{
    margin-bottom: 5px;
    font-size: 24px;
     color: #C29F65;
  }
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content:end;
  align-items: center;
}
.ld-titbox{
  color: #333333;
  width: 1180px;
  margin:30px auto;
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
  .ld-tit{
    font-size: 32px;
  }
  span{
    cursor: pointer;
    &.ldcur{
      color: #C29F65;
    }
    margin-right: 15px;
    font-size: 24px;
  }
}
.listbox{
  display: flex;
}
.dw-list {
  P {
    margin: 20px 20px;
  }
  padding: 10px;
  display: flex;
  justify-content: space-around;
}
.dw-tit {
  padding: 30px;
  font-size: 18px;
}
.xrld {
  position: relative;
  display: flex;
  align-items: center;
  .xrld-left {
    border-right: 5px solid yellow;
    width: 300px;
    img {
      position: absolute;
      bottom: 0;
    }
  }
  color: #fff;
  width: 1180px;
  margin: 50px auto;
  height: 330px;
  background-image: url(/img/yygk/bg2.jpg);
  .xrld-tit {
    top: 60px;
    left: 50px;
    position: absolute;
    font-size: 32px;
  }
}
.dt {
  z-index: 1;
  .dtls {
    z-index: -1;
    position: absolute;
    top: 0;
    width: 800px;
    height: 500px;
    background-image: url(/img/yygk/cjwt.jpg);
  }
  position: relative;
  width: 1500px;
  height: 500px;
  margin: auto;
  background-image: url(/img/yygk/bg1.jpg);
  .st::-webkit-scrollbar-thumb {
    width: 5px;
    color: #5a82cf;
  }
  .st {
    &::-webkit-scrollbar {
      width: 4px;
      /*height: 4px;*/
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px #5a82cf;
      background: rgba(0, 0, 0, 0.5);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    z-index: 11;
    overflow-y: scroll;
    width: 800px;
    margin: auto;
    height: 480px;
    background-color: #fff;
  }
}
.zzjg {
  background-image: url(/img/yygk/bg1.jpg);
  color: #333333;
  .zzjg-title {
    font-size: 32px;
  }
  .zzjg-desc {
    font-size: 14px;
    margin-top: 13px;
  }
  margin: auto;
  text-align: center;
  width: 1180px;
  padding: 70px 0 55px;
}
.y1-link {
  width: 200px;
  margin: auto;
  text-align: center;
  color: #333333;
  margin-top: 140px;
  i {
    margin-left: 15px;
  }
  &:hover {
    cursor: pointer;
  }
}
.y1item2 {
  margin-top: 10px;
  width: 100%;
  height: 379px;
  background-image: url(/img/yygk/yyjj-5.jpg);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0 !important;
  .y1 > div {
    margin: 15px 0;
    font-size: 14px;
    width: 240px;
    height: 54px;
    letter-spacing: 1px;
    span {
      font-size: 36px;
    }
  }
}
.yygk-zzjg-item1 {
  display: flex;
  flex-direction: column;
  & > :nth-child(2) {
    width: 100%;
    flex: 1;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .y1item {
    width: 100%;
    height: 379px;
    background-image: url(/img/yygk/yyjj-2.jpg);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .y1 > div {
      margin: 15px 0;
      font-size: 14px;
      width: 240px;
      height: 54px;
      letter-spacing: 1px;
      span {
        font-size: 36px;
      }
    }
  }
}
.yygk-zzjg-item2 {
  display: flex;
  flex-direction: column;
  & > :nth-child(2) {
    width: 100%;
    flex: 1;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .y1item {
    width: 100%;
    height: 379px;
    background-image: url(/img/yygk/yyjj-3.jpg);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .y1 > div {
      margin: 15px 0;
      font-size: 14px;
      width: 240px;
      height: 54px;
      letter-spacing: 1px;
      span {
        font-size: 36px;
      }
    }
  }
}
.yygk-zzjg-item3 {
  display: flex;
  flex-direction: column;
  & > :nth-child(2) {
    width: 100%;
    flex: 1;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .y1item {
    width: 100%;
    height: 379px;
    background-image: url(/img/yygk/yyjj-4.jpg);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .y1 > div {
      margin: 15px 0;
      font-size: 14px;
      width: 240px;
      height: 54px;
      letter-spacing: 1px;
      span {
        font-size: 36px;
      }
    }
  }
}
.yygk-zzjg-box {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  & > div {
    flex: 1 1 1;
    width: 380px;
  }
  & > :nth-child(1) {
    height: 650px;
  }
  & > :nth-child(2) {
    height: 550px;
  }
  & > :nth-child(3) {
    position: relative;
    height: 778px;
  }
  margin: auto;
  width: 1180px;
  height: 590px;
}
.headimg {
  display: flex;
  justify-content: center;
  align-items: center;
  .headtitle {
    color: #fff;
    font-size: 40px;
  }
  width: 1803px;
  background-image: url(/img/yygk/s5cc000b28af1b.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 600px;
  img {
    width: 100%;
  }
  margin: auto;
}
</style>